<template>
  <view class="fixed top-0 left-0 w-full h-[400rpx] z-100 pointer-events-none">
    <gp-danmu
      v-if="danmuList.length"
      ref="danmuRef"
      :danmu-list="danmuList"
      :config="danmuConfig"
      @click="handleDanmuClick"
      @leave="handleLeave"
    >
      <template #danmu="{ danmu }">
        <view class="flex items-center bg-black/50 py-1 px-3 rounded-full">
          <wd-img width="50rpx" height="50rpx" src="/static/default_avatar.png"></wd-img>
          <text class="text-xs text-white ml-1">{{ danmu.text }}</text>
        </view>
      </template>
    </gp-danmu>
  </view>
</template>

<script setup lang="ts">
import { v4 as uuidV4 } from 'uuid'
import { fetchBarrageList } from '@/service/public'
import useActivityStore from '@/store/activity'

const activityStore = useActivityStore()
const activity = computed(() => activityStore.activity)
// 弹幕数据

const danmuList = ref([])

// 弹幕配置
const danmuConfig = reactive({
  trackHeight: 40, // 轨道高度
  trackNumber: 7, // 轨道数量
  speed: 100, // 弹幕速度
  fontSize: 16, // 默认字体大小
  fontColor: '#FFFFFF', // 默认字体颜色
  backgroundColor: 'transparent', // 弹幕背景色
  trackMode: 'separate', // 轨道模式：overlap(重叠)、separate(分离)
  looping: false, // 是否循环播放
  direction: 'rtl', // 弹幕方向：rtl(从右到左)、ltr(从左到右)
  duration: 3000, // 弹幕动画持续时间（毫秒）
  density: 0.5, // 弹幕密度(0-1)
  randomTrack: true, // 是否随机选择轨道
  opacity: 1, // 弹幕透明度
})

// 弹幕组件引用
const danmuRef = ref(null)

const current = ref(0)

// 点击弹幕事件回调
const handleDanmuClick = (danmu) => {
  console.log('点击了弹幕:', danmu)
}

function handleLeave(item) {
  addDanmu(danmuList.value[current.value])
  // console.log('弹幕离开', item)
  if (current.value >= danmuList.value.length - 1) {
    current.value = 0
  } else {
    current.value++
  }
}

function addDanmu(value: any) {
  danmuRef.value.add({
    ...value,
    id: uuidV4(),
  })
}

function getBarrageList() {
  fetchBarrageList({
    activity_id: activity.value.id,
  }).then((res) => {
    danmuList.value = res.data.lists.map((item) => ({
      ...item,
      origin_id: item.id,
      text: item.comment,
    }))
    console.log(`res`, danmuList.value)
  })
}
// getBarrageList()
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
}
</script>
<style lang="scss" scoped></style>
